.container {
  width: 100%;
  height: 600px;
  position: relative;

  svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    path {
      fill: none;
      stroke: white;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 0.5;
      stroke-dasharray: 8 8;
      stroke-dashoffset: 0px;
    }

    .mask1 {
      path {
        transform: translate(46%, 40%) scale(1500);
      } /* 0 */
    }

    .mask2 {
      path {
        transform: translate(10%, 0%) scale(1500);
      } /* 0.15 */
    }

    .mask3 {
      path {
        transform: translate(8%, 10%) scale(2200);
      } /* 0.35 */
    }

    .mask4 {
      path {
        transform: translate(10%, 46%) scale(2500);
        stroke-dasharray: 7 11;
      } /* 0.55 */
    }

    .mask5 {
      path {
        transform: translate(46%, 32%) scale(710);
        stroke-width: 1;
        stroke-dasharray: 30 29;
      } /* 0.79 */
    }

    @mixin page {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex: 1;
      rect {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
      image {
        width: 240px;
        height: 340px;
        object-fit: cover;
        transform: translate(28%, 16%);
      }
      text {
        transform: translate(54%, 50%);
        font-size: 56px;
        line-height: 1.07143;
        font-weight: 600;
        letter-spacing: -0.005em;
      }
    }

    .page1 {
      @include page;
    }
    .page2 {
      @include page;
    }
    .page3 {
      @include page;
    }
    .page4 {
      @include page;
    }
    .page5 {
      @include page;
    }
  }

  $btnWidth: 200px;
  $iconWidth: 60px;
  .prevBtn {
    position: absolute;
    width: $btnWidth;
    height: $btnWidth;
    top: 0;
    bottom: 0;
    left: calc($btnWidth / -2);
    margin: auto 0;
    display: flex;
    flex: 1;
    justify-content: flex-end;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 40px;
    cursor: pointer;
    transform: translateX(calc($btnWidth / -2));
    transition: 0.6s;

    .icon {
      width: $iconWidth;
      height: $iconWidth;
      margin-right: calc(calc($btnWidth/2 - $iconWidth) / 2);
      :global {
        .anticon {
          width: $iconWidth;
          height: $iconWidth;
          position: relative;
          svg {
            width: $iconWidth;
            height: $iconWidth;
            path {
              fill: #fff;
            }
          }
        }
      }
    }
  }
  .nextBtn {
    position: absolute;
    width: $btnWidth;
    height: $btnWidth;
    top: 0;
    bottom: 0;
    right: calc($btnWidth / -2);
    margin: auto 0;
    display: flex;
    flex: 1;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 40px;
    cursor: pointer;
    transform: translateX(calc($btnWidth / 2));
    transition: 0.6s;

    .icon {
      width: $iconWidth;
      height: $iconWidth;
      margin-left: calc(calc($btnWidth/2 - $iconWidth) / 2);
      font-size: 20px;
      :global {
        .anticon {
          width: $iconWidth;
          height: $iconWidth;
          position: relative;
          svg {
            width: $iconWidth;
            height: $iconWidth;
            path {
              fill: #fff;
            }
          }
        }
      }
    }
  }

  &:hover {
    .prevBtn,
    .nextBtn {
      transform: translateX(0);
    }
  }
}
